<template>
  <div class="applicationMain">
    <div class="headerBox flex align-center justify-between">
      <h3>应用列表<span>汇聚工具应用，拓展评估能力</span></h3>
      <a href="javascript:;" class="flex align-center">
        更多
        <i class="el-icon-d-arrow-right"></i>
      </a>
    </div>
    <div class="applicationBox clearfix">
      <div class="listItem" v-for="(item, index) in list" :key="index">
        <div class="outside">
          <div class="inner">
            <div class="img" :style="'background-image: url('+item.image+')'"></div>
            <div class="text">
              <h3 class="ellipsis2">{{ item.title }}</h3>
              <p class="ellipsis">作者：{{ item.author }}</p>
              <div class="time ellipsis flex align-center justify-end">
                {{ item.time }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  props: {},
  components: {},
  data() {
    return {
      list: [
        {
          image: require('@/assets/images/portalWebsite/app01.png'),
          title: '综合安全评估工具集成管理平台',
          author: 'admin',
          time: '2023-03-30 18:10:00'
        },
        {
          image: require('@/assets/images/portalWebsite/app02.png'),
          title: '企业级风险评估自动化应用工具',
          author: 'admin',
          time: '2023-03-30 18:10:00'
        },
        {
          image: require('@/assets/images/portalWebsite/app03.png'),
          title: '多场景适配的安全决策支持系统',
          author: 'admin',
          time: '2023-03-30 18:10:00'
        },
        {
          image: require('@/assets/images/portalWebsite/app06.png'),
          title: '基于可视化的风险评估结果展示工具',
          author: 'admin',
          time: '2023-03-30 18:10:00'
        },
      ]
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {},
}
</script>
<style lang="scss" scoped>
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.applicationMain {
  .headerBox {
    height: 70px;
    padding: 0 10px;

    h3 {
      color: #333;
      font-size: 24px;
      font-weight: 400;
      margin-bottom: 20px;
      margin-right: 40px;
      font-weight: bold;

      span {
        font-size: 14px;
        color: #9199a1;
        letter-spacing: .88px;
        line-height: 16px;
        font-weight: 400;
        margin-left: 28px;
        padding-top: 12px;
      }
    }

    a {
      font-size: 14px;
      color: #333;

      i {
        position: relative;
        top: 1px;
      }

      &:hover {
        color: #294098;

        i {
          color: #294098;
        }
      }
    }
  }

  .applicationBox {

    .listItem {
      width: 25%;
      float: left;
      cursor: pointer;

      .outside {
        padding: 10px;

        .inner {
          background: #fff;
          border-radius: 5px;
          overflow: hidden;
          transition: all 0.2s;

          &:hover {
            transform: translateY(-5px) !important;
            text-shadow: 0 12px 20px 0 rgba(95, 101, 105, .15) !important;
          }

          .img {
            overflow: hidden;
            height: 120px;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
          }

          .text {
            padding: 10px 12px;
            height: 106px;
            position: relative;
            box-sizing: border-box;

            h3 {
              margin: 0;
              max-height: 36px;
              font-size: 14px;
              color: #545c63;
              line-height: 18px;
              font-weight: 500;
            }

            p {
              height: 12px;
              line-height: 12px;
              font-size: 12px;
              margin: 6px 0 0;
              color: #666;
            }

            .time {
              font-size: 12px;
              color: #666;
              position: absolute;
              left: 10px;
              right: 10px;
              bottom: 12px;
            }
          }
        }
      }

      &:hover {
        img {
          transform: scale(1.1);
        }

        h3 {
          color: #294098 !important;
        }
      }
    }
  }
}
</style>
